<template>
	<transition-group name='fade'>
		<!-- 蒙版 -->
		<div class="mask" key="1" @click="show = false" v-if="show" @touchmove.prevent>
		</div>
		<div class="pop" v-show="show" key="2">
			<div class="popTitle">{{title}}</div>
			<div class="popContent">{{content}}</div>
			<div class="popBtnBox">
				<button @click="btnClick">{{btnText}}</button>
			</div>
		    <img src="./close.png"  @click="show = false" class="close"/>
		</div>
	</transition-group>

</template>
<script>
	export default {
		name: 'Popup',
		data() {
			return {
				show: false,
				imgUrl: '',
				title: '',
				content: '',
				btnText: '',
			}
		},
		created() {},
		methods: {
			btnClick() {
				this.click()
				this.show = false
			},
		},
	}
</script>
<style lang="scss" scoped>
	// 渐变过渡
	.fade-enter,
	.fade-leave-active {
		opacity: 0;
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 0.35s;
	}

	// 全局弹窗
	.mask {
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		z-index: 10;
		width: 100%;
		height: 100%;
	}

	.pop {
		position: fixed;
		top: calc(50% - 75px);
		left: calc(50% - 210px);
		display: inline-block;
		width: 420px;
		padding-bottom: 10px;
		vertical-align: middle;
		background-color: #fff;
		border-radius: 4px;
		border: 1px solid #ebeef5;
		font-size: 18px;
		text-align: left;
		overflow: hidden;
		backface-visibility: hidden;
		z-index: 20;
		text-align: center;

		.popTitle {
			width: calc(100% - 30px);
			text-align: left;
			padding: 15px 15px 10px;
		}

		.popContent {
			width: calc(100% - 30px);
			text-align: left;
			padding: 0px 15px 10px;
			color: #606266;
			font-size: 14px;
		}

		.popBtnBox {
			width: calc(100% - 30px);
			padding: 0px 15px;
			text-align: right;


			button {
				color: #fff;
				background-color: #409eff;
				border-color: #409eff;
				border-radius: 2px;
				height: 30px;
				font-size: 14px;
				display: inline-block;
				line-height: 1;
				white-space: nowrap;
				cursor: pointer;
				border: 1px solid #dcdfe6;
				-webkit-appearance: none;
				text-align: center;
				box-sizing: border-box;
				outline: none;
				margin: 0;
				transition: .1s;
				font-weight: 500;
			}
		}



		.close {
			top: 5px;
			right: 5px;
			position: absolute;
			display: block;
			font-size: 20px;
			width: 22px;
			height: 22px;
		}
	}
</style>
